<template>
    <div class="SCdealWrap">
        <div class="SCdealHeader">统计时间：<span>2019-07-25 20:24</span></div>
        <div :class="(DataListStatus == '交易总览')?'SCdealTwo':'SCdealTwoS'">
            {{DataListStatus}}
        </div>
        <div class="SCdealCenter">
            <div class="SCdealCenterDiv">
                <p class="SCdealCenterDivA">
                    <span @click="showDataList(1)">23</span>
                    <span @click="showDataList(2)">153</span>
                    <span @click="showDataList(3)">1</span>
                    <span @click="showDataList(4)">132</span>
                    <span @click="showDataList(5)">1</span>
                    <span @click="showDataList(6)">9999</span>
                </p>
                <p class="SCdealCenterDivB">
                    <span @click="showDataList(1)">代付款</span>
                    <span @click="showDataList(2)">待发货</span>
                    <span @click="showDataList(3)">待退款售后</span>
                    <span @click="showDataList(4)">待评价</span>
                    <span @click="showDataList(5)">物流异常</span>
                    <span @click="showDataList(6)">总交易数量</span>
                </p>
            </div>
            <p class="SCdealCenterBottom">更新时间：<span>2019-07-25 20:24</span></p>
        </div>
        <router-view class="SCdealRouterView"></router-view>
    </div>
</template>

<script>
    export default {
        name: "SCdeal",
        data(){
            return {
                // 第二行显示状态
                DataListStatus:"交易总览",

            }
        },
        methods: {
            // 选择展示不同的数据
            showDataList(index){
                this.isShow = true;
                // 中心内容正常
                // $(".SCdealCenter").height("215px");
                // 中心内容在列表出现高度变高
                $(".SCdealCenter").height("800px");
                switch (index) {
                    case 1:
                        console.log(index);
                        this.$router.push('/SCdeal/SCdealA');
                        break;
                    case 2:
                        console.log(index);
                        this.$router.push('/SCdeal/SCdealB');
                        break;
                    case 3:
                        console.log(index);
                        this.$router.push('/SCdeal/SCdealC');
                        break;
                    case 4:
                        console.log(index);
                        this.$router.push('/SCdeal/SCdealD');
                        break;
                    case 5:
                        console.log(index);
                        this.$router.push('/SCdeal/SCdealE');
                        break;
                    case 6:
                        console.log(index);
                        this.$router.push('/SCdeal/SCdealF');
                        break;
                    default:

                }
            },
            // 设置可以监听路由name的函数,保持页面状态
            watchRoute(routeName){
                // 获取当前路由name,改变侧边栏选中选项
                switch(routeName) {
                    // 流量中心
                    case "SCdealA":
                        this.DataListStatus = "代付款";
                        break;
                    // 访客中心
                    case "SCdealB":
                        this.DataListStatus = "待发货";
                        break;
                    // 交易中心
                    case "SCdealC":
                        this.DataListStatus = "待退款售后";
                        break;
                    // 成交中心
                    case "SCdealD":
                        this.DataListStatus = "待评价";
                        break;
                    // 转化率
                    case "SCdealE":
                        this.DataListStatus = "物流异常";
                        break;
                    // 活动中心
                    case "SCdealF":
                        this.DataListStatus = "总交易数量";
                        break;
                    default:
                        // 其他路由,都是交易总览
                        this.DataListStatus = "交易总览";
                }
            }
        },
        watch:{
            // 监听路由name
            $route(to,from){
                console.log(this.$route.name);
                this.watchRoute(this.$route.name);
            }
        },
        mounted(){
            // 刷新页面保持状态
            this.watchRoute(this.$route.name);
        }
    }
</script>

<style scoped>

    .SCdealWrap{
        position: relative;
    }
    /* 交易中心第一块 */
    .SCdealHeader{
        width:1015px;
        height:33px;
        line-height:33px;
        background:#FFFFFF;
        font-size:14px;
        font-weight:400;
        color:#1296DB;
        text-indent: 28px;
    }
    .SCdealHeader span{
        color:#1296DB;
    }
    /* 交易中心第二块 */
    .SCdealTwo{
        width:1015px;
        height:40px;
        line-height: 40px;
        background:#FFFFFF;
        font-size:19px;
        font-weight:400;
        color: #000000;;
        font-family:"PingFang-SC-Heavy";
        text-indent: 28px;
        margin: 20px 0 15px;
    }
    .SCdealTwoS{
        width:1015px;
        height:40px;
        line-height: 40px;
        background:#FFFFFF;
        font-size:19px;
        font-weight:400;
        color:#FB6451;
        font-family:"PingFang-SC-Heavy";
        text-indent: 28px;
        margin: 20px 0 15px;
    }
    /* 交易中心第三块,中心内容 */
    .SCdealCenter{
        width:915px;
        height:215px;
        background:#FFFFFF;
        padding: 45px 50px 40px;
        position: relative;
    }
    .SCdealCenterDiv{
        border-top: 1px solid #707070;
        border-bottom: 1px solid #707070;
    }
    .SCdealCenterDivA{
        font-size:36px;
        line-height: 40px;
        font-weight:800;
        display: flex;
        justify-content: space-around;
        margin-top: 50px;
    }
    .SCdealCenterDivA span{
        color:#00B4FF;
        display: inline-block;
        overflow:auto;
        overflow-y: hidden;
        width: 15%;
        text-align: center;
        cursor: pointer;
    }
    .SCdealCenterDivB{
        font-size:15px;
        line-height: 30px;
        font-weight:400;
        display: flex;
        justify-content: space-around;
        margin-top: 10px;
        margin-bottom: 40px;
    }
    .SCdealCenterDivB span{
        color:#464646;
        display: inline-block;
        width: 16.6%;
        text-align: center;
        cursor: pointer;
    }
    /* 下面的更新时间 */
    .SCdealCenterBottom{
        font-size:14px;
        font-weight:400;
        color:#787878;
        margin-top: 30px;
    }
    .SCdealCenterBottom span{
        color:#787878;
    }


    /* router-view显示区域 */

    .SCdealRouterView{
        width:1015px;
        position: absolute;
        z-index: 2;
        top:105px;
    }
</style>
